﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/MapSite.Master" Inherits="System.Web.Mvc.ViewPage<DNBProject.ViewModel.MapTopViewModel>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<head>
    <link href="../../Content/Map/Navigabar/StyleSlidingMenu.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/Map/Navigabar/Tab.css" rel="stylesheet" type="text/css" media="screen"/>

    <script type="text/javascript" language="javascript">

        
        // When the document loads do everything inside here ...
        $(document).ready(function() {
            // When a link is clicked
            $("a.tab").click(function() {

                // switch all tabs off
                $(".active").removeClass("active");

                // switch this tab on
                $(this).addClass("active");

                // slide all content up
                $(".content").slideUp();

                // slide this content up
                var content_show = $(this).attr("title");
                $("#" + content_show).slideDown();
            });

        });
    </script>
<!--End Tab-->
  <script>
      window.open = function () { };
      window.print = function () { };
      // Support hover state for mobile.
      if (false) {
          window.ontouchstart = function () { };
      }

      function __linkClick(e) {
          parent.window.postMessage(this.href, '*');
      };

      function __bindToLinks() {
          var __links = document.querySelectorAll('a');
          for (var i = 0, l = __links.length; i < l; i++) {
              if (__links[i].getAttribute('data-t') == '_blank') {
                  __links[i].addEventListener('click', __linkClick, false);
              }
          }
      }
  </script>

  <!--Dropdown menu -->
    <link href="../../Content/Map/Navigabar/normalize.css" rel="stylesheet" type="text/css" />
    <link href="../../Content/Map/Navigabar/TestDropDownMenu.css" rel="stylesheet" type="text/css" />
 <script>
     window.open = function () { };
     window.print = function () { };
     // Support hover state for mobile.
     if (false) {
         window.ontouchstart = function () { };
     }

     function __linkClick(e) {
         parent.window.postMessage(this.href, '*');
     };

     function __bindToLinks() {
         var __links = document.querySelectorAll('a');
         for (var i = 0, l = __links.length; i < l; i++) {
             if (__links[i].getAttribute('data-t') == '_blank') {
                 __links[i].addEventListener('click', __linkClick, false);
             }
         }
     }
 </script>
  
  <!--End Dropdown menu-->
</head>

<body>

<% var tbKkkq = (IEnumerable<DNBProject.tbKKXQ>) ViewBag.tbKKXQ;
   var tbNuocsong = (IEnumerable<DNBProject.tbNuocsong>)ViewBag.tbNuocsong;
   var tbNuocho = (IEnumerable<DNBProject.tbNuocho>)ViewBag.tbNuocho;
   var tbNuocngam = (IEnumerable<DNBProject.tbNuocngam>) ViewBag.tbNuocngam;
   var tbNuocbien = (IEnumerable<DNBProject.tbNuocbien>)ViewBag.tbNuocbien;
   var tbMothuysan = (IEnumerable<DNBProject.tbMothuysan>)ViewBag.tbMothuysan;
   var tbTramtich = (IEnumerable<DNBProject.tbTramtich>)ViewBag.tbTramtich;
   var tbDat = (IEnumerable<DNBProject.tbDat>)ViewBag.tbDat;
   var tbCssxKhongKhi = (IEnumerable<DNBProject.tbCSSX_KhongKhi>)ViewBag.tbCSSX_KhongKhi;
   var tbCssxNuocthai = (IEnumerable<DNBProject.tbCSSX_Nuocthai>)ViewBag.tbCSSX_Nuocthai;
%>
  <!-- Navigation -->
<div id="tabbed_box_1" class="tabbed_box" style="height: 780px">
	<h4 style="text-align:center">Nội dung</h4>
    <div class="tabbed_area" style="height: 498px;">     	
        <ul class="tabs">
            <li><a href="#" title="content_1" class="tab active">Bản đồ</a></li>
            <li><a href="#" title="content_2" class="tab">Số liệu</a></li>
            <li><a href="#" title="content_3" class="tab">Báo cáo</a></li>
        </ul>        
        <div id="content_1" class="content">
		<div class="container">
		  <h1 class="title">Điểm quan trắc</h1>
          <div class="contentTabScroll">
              <ul>
			    <li class="dropdown">
			      <a href="#" data-toggle="dropdown">Không khí <i class="icon-arrow"></i></a>
			      <ul class="dropdown-menu">
                    <% foreach (var item in tbKkkq)
                       {%>
                            <li><a href="#" keyObject="<%:item.ID %>" layerName = "Kkxq"><img src="../../Content/Map/Images/line.jpg" style="width: 5px; height: 20px; padding-right: 5px;" /><%: item.colKyhieu + " - " + item.colVitri%></a></></li>
                       <% } %>
			      </ul>
			    </li>
			    <li class="dropdown">
			      <a href="#" data-toggle="dropdown">Nước sông <i class="icon-arrow"></i></a>
			      <ul class="dropdown-menu">
				     <% foreach (var item in tbNuocsong)
                       {%>
                           <li><a href="#" keyObject="<%:item.ID %>" layerName = "Nuocsong"><img src="../../Content/Map/Images/line.jpg" style="width: 5px; height: 20px;padding-right: 5px;" /><%: item.colKyhieu + " - " + item.colVitri%></a></></li>
                       <% } %>
			      </ul>
			    </li>
			    <li class="dropdown">
			      <a href="#" data-toggle="dropdown">Nước hồ <i class="icon-arrow"></i></a>
			      <ul class="dropdown-menu">
				     <% foreach (var item in tbNuocho)
                       {%>
                           <li><a href="#" keyObject="<%:item.ID %>" layerName = "Nuocho"><img src="../../Content/Map/Images/line.jpg" style="width: 5px; height: 20px;padding-right: 5px;" /><%: item.colKyhieu + " - " + item.colVitri%></a></></li>
                       <% } %>
			      </ul>
			    </li>
            
                <li class="dropdown">
			      <a href="#" data-toggle="dropdown">Nước ngầm <i class="icon-arrow"></i></a>
			      <ul class="dropdown-menu">
				     <% foreach (var item in tbNuocngam)
                       {%>
                           <li><a href="#" keyObject="<%:item.ID %>" layerName = "Nuocngam"><img src="../../Content/Map/Images/line.jpg" style="width: 5px; height: 20px;padding-right: 5px;" /><%: item.colKyhieu + " - " + item.colVitri%></a></></li>
                       <% } %>
			      </ul>
			    </li>
			    <li class="dropdown">
			      <a href="#" data-toggle="dropdown">Nước biển <i class="icon-arrow"></i></a>
			      <ul class="dropdown-menu">
				     <% foreach (var item in tbNuocbien)
                       {%>
                           <li><a href="#" keyObject="<%:item.ID %>" layerName = "Nuocbien"><img src="../../Content/Map/Images/line.jpg" style="width: 5px; height: 20px;padding-right: 5px;" /><%: item.colKyhieu + " - " + item.colVitri%></a></></li>
                       <% } %>
			      </ul>
			    </li>
			    <li class="dropdown">
			      <a href="#" data-toggle="dropdown">Mô thủy sản <i class="icon-arrow"></i></a>
			      <ul class="dropdown-menu">
				     <% foreach (var item in tbMothuysan)
                       {%>
                           <li><a href="#" keyObject="<%:item.ID %>" layerName = "Mothuysan"><img src="../../Content/Map/Images/line.jpg" style="width: 5px; height: 20px;padding-right: 5px;" /><%: item.colKyhieu + " - " + item.colVitri%></a></></li>
                       <% } %>
			      </ul>
			    </li>
                <li class="dropdown">
			      <a href="#" data-toggle="dropdown">Trầm tích <i class="icon-arrow"></i></a>
			      <ul class="dropdown-menu">
				     <% foreach (var item in tbTramtich)
				        { %>
                           <li><a href="#" keyObject="<%: item.ID %>" layerName = "Tramtich"><img src="../../Content/Map/Images/line.jpg" style="width: 5px; height: 20px;padding-right: 5px;" /><%: item.colKyhieu + " - " + item.colVitri %></a></></li>
                       <% } %>
			      </ul>
			    </li>
                <li class="dropdown">
			      <a href="#" data-toggle="dropdown">Đất <i class="icon-arrow"></i></a>
			      <ul class="dropdown-menu">
				     <% foreach (var item in tbDat)
				        { %>
                           <li><a href="#" keyObject="<%: item.ID %>" mappingTable = "Dat"><img src="../../Content/Map/Images/line.jpg" style="width: 5px; height: 20px;padding-right: 5px;" /><%: item.colKyhieu + " - " + item.colVitri %></a></></li>
                       <% } %>
			      </ul>
			    </li>
                <li class="dropdown">
			      <a href="#" data-toggle="dropdown">Không khí CSSX <i class="icon-arrow"></i></a>
			      <ul class="dropdown-menu">
				     <% foreach (var item in tbCssxKhongKhi)
                       {%>
                           <li><a href="#"><img src="../../Content/Map/Images/line.jpg" style="width: 5px; height: 20px;padding-right: 5px;" /><%: item.colKyhieu + " - " + item.colVitri%></a></></li>
                       <% } %>
			      </ul>
			    </li>
                <li class="dropdown">
			      <a href="#" data-toggle="dropdown">Nước thải CSSX <i class="icon-arrow"></i></a>
			      <ul class="dropdown-menu">
				     <% foreach (var item in tbCssxNuocthai)
                       {%>
                           <li><a href="#"><img src="../../Content/Map/Images/line.jpg" style="width: 5px; height: 20px;padding-right: 5px;" /><%: item.colKyhieu + " - " + item.colVitri%></a></></li>
                       <% } %>
			      </ul>
			    </li>
                <li class="dropdown">
			      <a href="#" data-toggle="dropdown">Sự cố tràn dầu <i class="icon-arrow"></i></a>
			      <ul class="dropdown-menu">
				
			      </ul>
			    </li>
                <li class="dropdown">
			      <a href="#" data-toggle="dropdown">Lấy mẫu thanh tra <i class="icon-arrow"></i></a>
			      <ul class="dropdown-menu">
				
			      </ul>
			    </li>
                <li class="dropdown">
			      <a href="#" data-toggle="dropdown">Lấy mẫu giám sát <i class="icon-arrow"></i></a>
			      <ul class="dropdown-menu">
				
			      </ul>
			    </li>
                <li class="dropdown">
			      <a href="#" data-toggle="dropdown">Lấy mẫu dịch vụ <i class="icon-arrow"></i></a>
			      <ul class="dropdown-menu">
				
			      </ul>
			    </li>
		      </ul>
          </div>

		  <!--
		  <p class="text-center">
			See this same menu only with CSS3: <a href="http://codepen.io/pedronauck/pen/jaluz" target="_blank">http://codepen.io/pedronauck/pen/jaluz</a>
		  </p>
		  -->
		  </div>
        </div>
        
        <div id="content_2" class="content">
        	<div class="container">
		  <h1 class="title">Số liệu</h1>
          <div class="contentTabScroll">
		  <ul>
			<li class="dropdown">
			  <a href="#" data-toggle="dropdown">First Menu <i class="icon-arrow"></i></a>
			  <ul class="dropdown-menu">
				<li><a href="#">Home</a></li>
				<li><a href="#">About Us</a></li>
				<li><a href="#">Services</a></li>
				<li><a href="#">Contact</a></li>
			  </ul>
			</li>
			<li class="dropdown">
			  <a href="#" data-toggle="dropdown">Second Menu <i class="icon-arrow"></i></a>
			  <ul class="dropdown-menu">
				<li><a href="#">Home</a></li>
				<li><a href="#">About Us</a></li>
				<li><a href="#">Services</a></li>
				<li><a href="#">Contact</a></li>
			  </ul>
			</li>
			<li class="dropdown">
			  <a href="#" data-toggle="dropdown">Third Menu <i class="icon-arrow"></i></a>
			  <ul class="dropdown-menu">
				<li><a href="#">Home</a></li>
				<li><a href="#">About Us</a></li>
				<li><a href="#">Services</a></li>
				<li><a href="#">Contact</a></li>
			  </ul>
			</li>
		  </ul>
          </div>
		  </div>
        </div>
        
        <div id="content_3" class="content">
        	<div class="container">
		  <h1 class="title">Loại quan trắc</h1>
          <div class="contentTabScroll">
		  <ul>
			<li class="dropdown">
			  <a href="#" data-toggle="dropdown">Không khí <i class="icon-arrow"></i></a>
			</li>
			<li class="dropdown">
			  <a href="#" data-toggle="dropdown">Nước sông <i class="icon-arrow"></i></a>
			</li>
			<li class="dropdown">
			  <a href="#" data-toggle="dropdown">Nước hồ <i class="icon-arrow"></i></a>
			</li>
            
            <li class="dropdown">
			  <a href="#" data-toggle="dropdown">Nước ngầm <i class="icon-arrow"></i></a>
			</li>
			<li class="dropdown">
			  <a href="#" data-toggle="dropdown">Nước biển <i class="icon-arrow"></i></a>
			</li>
			<li class="dropdown">
			  <a href="#" data-toggle="dropdown">Mô thủy sản <i class="icon-arrow"></i></a>
			</li>
            <li class="dropdown">
			  <a href="#" data-toggle="dropdown">Trầm tích <i class="icon-arrow"></i></a>
			</li>
            <li class="dropdown">
			  <a href="#" data-toggle="dropdown">Đất <i class="icon-arrow"></i></a>
			</li>
            <li class="dropdown">
			  <a href="#" data-toggle="dropdown">Không khí CSSX <i class="icon-arrow"></i></a>
			</li>
            <li class="dropdown">
			  <a href="#" data-toggle="dropdown">Nước thải CSSX <i class="icon-arrow"></i></a>
			</li>
            <li class="dropdown">
			  <a href="#" data-toggle="dropdown">Sự cố tràn dầu <i class="icon-arrow"></i></a>
			</li>
            <li class="dropdown">
			  <a href="#" data-toggle="dropdown">Lấy mẫu thanh tra <i class="icon-arrow"></i></a>
			</li>
            <li class="dropdown">
			  <a href="#" data-toggle="dropdown">Lấy mẫu giám sát <i class="icon-arrow"></i></a>
			</li>
            <li class="dropdown">
			  <a href="#" data-toggle="dropdown">Lấy mẫu dịch vụ <i class="icon-arrow"></i></a>
			</li>
		  </ul>
          </div>
		  </div>
        </div>
    
    </div>

</div>
<!-- Content panel -->
<div id="content">
	<div class="menu-trigger"></div>
    <div id="mapContent">
	    <% Html.RenderPartial("MapPartial", Model); %>
    </div>
    <div id="reportContent" style="display: none;">
	    <% Html.RenderPartial("ReportPartial/ReportPartial", Model.ReportModel); %>
    </div>
</div>

    <script src="../../Scripts/Navigabar/localstorage.js" type="text/javascript"></script>
    <script src="../../Scripts/Navigabar/remember_scroll.js" type="text/javascript"></script>

  <script>      RememberScroll.init();</script>

  <script>
      if (document.location.search.match(/type=embed/gi)) {
          window.parent.postMessage('resize', "*");
      }
      __bindToLinks();
  </script>

  <script>
      /*
      Slidemenu
      */
      (function () {
          var $body = document.body
              , $menu_trigger = $body.getElementsByClassName('menu-trigger')[0];

          if (typeof $menu_trigger !== 'undefined') {
              $menu_trigger.addEventListener('click', function () {
                  $body.className = ($body.className == 'menu-active') ? '' : 'menu-active';
              });
          }

      }).call(this);
  //@ sourceURL=pen.js
  </script>
<!--Dropdown menu-->
<script>
    // Dropdown Menu
    var dropdown = document.querySelectorAll('.dropdown');
    var dropdownArray = Array.prototype.slice.call(dropdown, 0);
    dropdownArray.forEach(function (el) {
        var button = el.querySelector('a[data-toggle="dropdown"]'),
            menu = el.querySelector('.dropdown-menu'),
            arrow = button.querySelector('i.icon-arrow');

        button.onclick = function (event) {
            if (!menu.hasClass('show')) {
                menu.classList.add('show');
                menu.classList.remove('hide');
                arrow.classList.add('open');
                arrow.classList.remove('close');
                event.preventDefault();
            } else {
                menu.classList.remove('show');
                menu.classList.add('hide');
                arrow.classList.remove('open');
                arrow.classList.add('close');
                event.preventDefault();
            }
        };
    });

    Element.prototype.hasClass = function (className) {
        return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
    };
</script>

</asp:Content>
